<script setup lang='ts'>
  import { reactive } from 'vue';
  import { propApi } from '@/api/controller';
  import { Toastloading } from '@/utils/public';
  const $emit = defineEmits(['updateList'])
  const action = reactive({
    dialogFormVisible:false,
    disabled:false,
    title:'',
    list:[] as Array<any>,
    pool_id:0,
    rate_num:0,
    now_use:0,
    rateList:[] as Array<any>,
  })
  const getPoolRateList = async()=>{
    const loading = Toastloading()
    const res = await propApi.getPoolRateList({
      pool_id:action.pool_id,
    })
    loading.close()
    const { data } = res
    action.rateList = data
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await propApi.colorGiftPoolConfigNum({
      pool_id:action.pool_id,
      rate_num:action.rate_num
    })
    loading.close()
    const { list={}, now_rate_num='', now_use=0 } = res.data || {}
    action.rate_num = Number(now_rate_num)
    action.now_use = now_use
    action.list = list
    return now_rate_num
  }
  const openDialog = async(query:any={})=> {
    const { id=0, pool_name='' } = query
    action.pool_id = id
    await getPoolRateList()
    const now_rate_num = await getList()
    action.title = `礼物池剩余数量：${pool_name} 概率${now_rate_num}`
    action.dialogFormVisible = true
  }
  defineExpose({
    openDialog
  })
</script>

<template>
  <div>
    <el-dialog
      top="7vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :close-on-press-escape="action.disabled"
      width="50%"
      :title="action.title">
      <div class="xm-headTab">
        <div class="labelBox">
          <div class="labelItem">
            <div class="label">礼物池类型：</div>
            <el-select v-model="action.rate_num" @change="getList" placeholder="请选择礼物池类型">
              <el-option
                v-for="item in action.rateList"
                :key="item.rate_num"
                :label="item.name"
                :value="item.rate_num" />
            </el-select>
            <el-tag class="xm-ml10" :type="action.now_use == action.rate_num ? 'success' : 'danger'">状态：{{  action.now_use == action.rate_num ? '已生效' : '未生效' }}</el-tag>
          </div>
        </div>
      </div>
      <el-table
        class="xm-TableCenter"
        :data="action.list"
        border
      >
        <el-table-column width="80" prop="id" label="礼物池配置ID" />
<!--        <el-table-column width="80" prop="id" label="房间UUID" />-->
<!--        <el-table-column width="80" prop="id" label="房间名称" />-->
<!--        <el-table-column width="80" prop="id" label="奖池类型" />-->
        <el-table-column width="80" prop="item_no" label="序号" />
        <el-table-column width="80" prop="gift_id" label="礼物ID" />
        <el-table-column min-width="80" prop="gift_name" label="礼物名称" />
        <el-table-column min-width="80" prop="gift_price" label="礼物价格" />
        <el-table-column min-width="80" prop="out_rate" label="外显概率" >
          <template #default="scoped">
            {{ scoped.row.out_rate > 0 ? (scoped.row.out_rate/100).toFixed(2) : scoped.row.out_rate }}%
          </template>
        </el-table-column>
        <el-table-column min-width="80" prop="gift_num" label="总数量" />
        <el-table-column min-width="80" prop="less_num" label="剩余数量" />
        <el-table-column min-width="80" prop="draw_num" label="已抽出数量" />
      </el-table>
    </el-dialog>
  </div>
</template>
